<template>
    <div class="feedback-record">
        <ul class="feedback-record-list">
            <li v-for="(item,index) in feedbackList" :key="index" class="feedback-record-list-item" @click="showDetail(item)">
                <div class="header">
                    <div class="header-left">
                        <div class="avatar">
                            <yowin-img :src="vueState.pageInfo.avatar"></yowin-img>
                        </div>
                        <div class="info">
                            <div class="name">{{vueState.pageInfo.nickName}}<span v-if="!item.readed" class="point"></span></div>
                            <div class="time">{{formatDate(item.createTime)}}</div>
                        </div>
                    </div>
                    <div class="header-right">
                        <div :class="['state',{'reply':item.replyed}]">{{item.replyed ? $t('Replied') : $t('No reply')}}</div>
                    </div>
                </div>
                <div class="main">{{item.feedBack}}</div>
            </li> 
        </ul>
        <div class="button" :style="{bottom:.32 * fsize + (vueState.pageStyle.tabBarHeight || 0) + 'px'}" @click="router.replace({name:'meFeedback'})">{{$t('Fill in feedback')}}</div>
    </div>
</template>
<script>
import { inject, onMounted, toRefs } from 'vue'
import {useFeedback} from './components/useFeedback.js'
import {useMeInfo} from '../components/useMeInfo.js'
import {formatDate} from '@@/utils/common.js'
import {useRouter,onBeforeRouteLeave } from 'vue-router'
export default {
    setup(props) {
        const vueState = inject('vueState')
        const router = useRouter()
        const {getFeedbackInfo} = useMeInfo()
        const {feedbackList,showDetail,state} = useFeedback()
        console.log(feedbackList);
        onBeforeRouteLeave((to, from)=>{
            console.log('from',from,'to',to);
            if(to.name === 'feedbackDetail' && !to.params.item){
                return {
                    path:'/'
                }
            }
        })
        onMounted(()=>{
            vueState.EventEmitter.immediately('afterRegist',getFeedbackInfo,vueState.pageStatus.afterRegist)
        })
        return {
            ...toRefs(state),
            vueState,
            feedbackList,
            showDetail,
            formatDate,
            router
        }
    }
}
</script>
<style lang="less" scoped>
.feedback-record{
    height: 100%;
    background-color:#F5F6F9;
    padding: .16rem;
    overflow-y: auto;
    &-list{
        padding-bottom: .8rem;
        &-item{
            border-radius: .12rem;
            background-color: white;
            padding: .16rem;
            margin-top: .2rem;
            &:first-child{
                margin-top: 0;
            }
            .header{
                display: flex;
                align-items: center;
                justify-content: space-between;
                &-left{
                    display: flex;
                    align-items: center;
                    .avatar{
                        height:.42rem;
                        width: .42rem;
                        border-radius: 50%;
                        margin-right: .08rem;
                        img{
                            height: 100%;
                            width: 100%;
                            display: block;
                        }
                    }
                    .info{
                        .name{
                            font-size: .14rem;
                            font-weight: 700;
                            color:#121314;
                            line-height: .24rem;
                            .point{
                                .unique-point();
                                margin-left: .04rem;
                            }
                        }
                        .time{
                            font-size: .12rem;
                            font-weight: 400;
                            line-height: .2rem;
                            color: #9C9DA6;
                        }
                    }
                }
                &-right{
                    .state{
                        font-size: .12rem;
                        font-weight: 500;
                        line-height: .2rem;
                        color:#9C9DA6;
                        padding:.04rem .12rem;
                        &.reply{
                            border: .01rem solid #F5B53F;
                            border-radius: .25rem;
                            color:#F5B53F;
                        }
                    }
                }
            }
            .main{
                margin-top: .08rem;
                font-size: .14rem;
                font-weight: 400;
                color: #121314;
                line-height: .24rem;
                word-break: break-all;
            }
        }
    }
    .button{
        .unique-button();
        font-size: .16rem;
        width: calc(100% - .32rem);
        height: .46rem;
        position: fixed;
        // bottom: .32rem;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>